<template>
  <div>

    <!--  搜索栏 -->
    <div id="banner-bear" class="preserve3d csstransforms3d">
      <!--      <p class="typing web-font transition">全新改版 轻装上阵</p>-->

      <blockquote class="blockquote text-center typing web-font transition">
        <p class="mb-0">我曾踏足山巅，也曾跌入低谷，二者都让我受益良多。</p>
        <footer class="blockquote-footer">瓦罗兰之盾塔里克 <cite title="Source Title">《英雄联盟》</cite></footer>
      </blockquote>

      <div class="primary-menus">
        <ul class="selects">
          <li>常用</li>
          <li class="current" data-target="search_1"><span>百度</span></li>
          <li data-target="search_2"><span>淘宝</span></li>
          <li data-target="search_3"><span>必应</span></li>
          <li data-target="search_4"><span>360</span></li>
          <li data-target="search_5"><span>搜狗</span></li>
          <li data-target="search_6"><span>B站</span></li>
          <li data-target="search_7"><span>微博</span></li>
          <li data-target="search_8"><span>GitHub</span></li>
        </ul>
        <!--  百度搜索，必应搜索等搜索栏 -->
        <div class="cont">
          <div class="left-cont">
            <form class="search" id="search_1" action="https://www.baidu.com/s?wd=" method="get"
                  target="_blank">
              <input type="text" name="wd" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">百度搜索</button>
            </form>
            <form class="search hidden" id="search_2" action="https://s.taobao.com/search?q=" method="get"
                  target="_blank">
              <input type="text" name="q" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">淘宝搜索</button>
            </form>
            <form class="search hidden" id="search_3" action="https://cn.bing.com/search?q=" method="get"
                  target="_blank">
              <input type="text" name="q" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">必应搜索</button>
            </form>
            <form class="search hidden" id="search_4" action="https://www.so.com/s?q=" method="get"
                  target="_blank">
              <input type="text" name="q" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">360搜索</button>
            </form>
            <form class="search hidden" id="search_5" action="https://www.sogou.com/web?query=" method="get"
                  target="_blank">
              <input type="text" name="query" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">搜狗搜索</button>
            </form>
            <form class="search hidden" id="search_6" action="https://search.bilibili.com/all?keyword="
                  method="get" target="_blank">
              <input type="text" name="keyword" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">B站搜索</button>
            </form>
            <form class="search hidden" id="search_7" action="https://s.weibo.com/weibo/" method="get"
                  target="_blank">
              <input type="text" name="" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">微博搜索</button>
            </form>
            <form class="search hidden" id="search_8" action="https://github.com/search?q=" method="get"
                  target="_blank">
              <input type="text" name="q" class="s" placeholder="请输入关键词">
              <button type="submit" name="submit" class="btn">GitHub搜索</button>
            </form>
          </div>
        </div>
      </div>


      <!-- 主题 -->
      <div class="banner-wrap scenes-ready">
        <div id="stage">
          <div class="space"></div>
          <div class="mountains">
            <div class="mountain mountain-1"></div>
            <div class="mountain mountain-2"></div>
            <div class="mountain mountain-3"></div>
          </div>
          <div class="bear"></div>
        </div>
      </div>
    </div>

    <!--  主体内容  -->
    <div class="container">

      <!-- 全部的API  -->
      <div class="row same-height row-position">

        <!--  左侧导航条-->
        <div id="quick-nav" class="col-md-1 quick-nav animate__animated animate__rollIn">
          <div class="my-left-bar same-height-l mt-4">
            <ul class="list-group left-ul">
              <!--                <li class="list-group-item">精品专区</li>-->
              <li class="list-group-1">
                <a href="#" @click="slipPage(1)" v-on:click.prevent>休闲娱乐</a>
              </li>
              <li class="list-group-2"><a href="#" @click="slipPage(2)" v-on:click.prevent>编程相关</a></li>
              <li class="list-group-3"><a href="#" @click="slipPage(3)" v-on:click.prevent>AI智能</a></li>
              <li class="list-group-4"><a href="#" @click="slipPage(4)" v-on:click.prevent>音乐版块</a></li>
              <li class="list-group-5"><a href="#" @click="slipPage(5)" v-on:click.prevent>新闻版块</a></li>
            </ul>

          </div>
        </div>

        <!--  右侧主体区域-->
        <div class="same-height-r ml-3">

          <!--  休闲娱乐模块开发完成  -->
          <div class="part animate__animated animate__bounceInDown" id="cate1" data-title="休闲娱乐">

            <div class="tt sticky">
              <strong class="information"><span>休</span><span>闲</span><span>娱</span><span>乐</span></strong>
              <!--              <a title="更多休闲娱乐的内容" href="#">更多+</a>-->
            </div>
            <div class="items">
              <div class="row">

                <!--  每日笑话  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/jokes" title="每日笑话"
                       target="_blank">
                      <img src="../../public/image/api/Jokes.png"
                           alt="每日笑话" title="每日笑话">
                      <h3>每日笑话</h3>
                      <p>
                        各大短视频平台无水印视频解析提取,看到好视频再也不怕保存不下来了...</p>
                    </a>
                  </div>
                </div>

                <!--  历史上的今天  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/historytoday" title="历史上的今天"
                       target="_blank">
                      <img src="../../public/image/api/HistoryToday.png"
                           alt="历史上的今天" title="历史上的今天">
                      <h3>历史上的今天</h3>
                      <p>
                        来看看历史上的今天都发生了那些有意思的事情吧...</p>
                    </a>
                  </div>
                </div>

                <!--  优美句子  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/beautifulsentence" title="优美句子"
                       target="_blank">
                      <img src="../../public/image/api/BeautifulSentence.png"
                           alt="优美句子" title="优美句子">
                      <h3>优美句子</h3>
                      <p>
                        来一些优美的句子吧...</p>
                    </a>
                  </div>
                </div>

                <!--  城市天气  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/weather" title="天气查询"
                       target="_blank">
                      <img src="../../public/image/api/Weather.png"
                           alt="天气查询" title="天气查询">
                      <h3>天气查询</h3>
                      <p>
                        出门前先看看天气怎么样吧...</p>
                    </a>
                  </div>
                </div>

                <!--  文字转二维码  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/qrcode" title="文字转二维码"
                       target="_blank">
                      <img src="../../public/image/api/QRCode.png"
                           alt="文字转二维码" title="文字转二维码">
                      <h3>文字转二维码</h3>
                      <p>
                        输入文字，转换成为二维码...</p>
                    </a>
                  </div>
                </div>

                <!--  随机壁纸    -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/randomimage" title="随机壁纸生成"
                       target="_blank">
                      <img src="../../public/image/api/RandomImage.png"
                           alt="随机壁纸生成" title="随机壁纸生成">
                      <h3>随机壁纸生成</h3>
                      <p>还在为寻找好看的壁纸而发愁吗，随机来一个吧...</p>
                    </a>
                  </div>
                </div>

                <!--  随机头像  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/randomheadportrait" title="随机头像"
                       target="_blank">
                      <img src="../../public/image/api/RandomHeadPortrait.png"
                           alt="随机头像" title="随机头像">
                      <h3>随机头像</h3>
                      <p>
                        想换个头像却又不知道如何选择，来个随机头像...</p>
                    </a>
                  </div>
                </div>

                <!--  土味情话  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/lovesentence" title="土味情话"
                       target="_blank">
                      <img src="../../public/image/api/LoveSentence.png"
                           alt="土味情话" title="土味情话">
                      <h3>土味情话</h3>
                      <p>
                        随机生成一句土味情话，快拿去撩喜欢的人吧...
                      </p>
                    </a>
                  </div>
                </div>

                <!--  随机昵称  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/nickname" title="随机昵称"
                       target="_blank">
                      <img src="../../public/image/api/NickName.png"
                           alt="随机昵称" title="随机昵称">
                      <h3>随机昵称</h3>
                      <p>
                        还在为取什么昵称烦恼吗？这款神器帮你随机取一个昵称...
                      </p>
                    </a>
                  </div>
                </div>

                <!--  唐诗大全  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/tangpoem" title="唐诗大全"
                       target="_blank">
                      <img src="../../public/image/api/TangPoem.png"
                           alt="唐诗大全" title="唐诗大全">
                      <h3>唐诗大全</h3>
                      <p>快来欣赏优美的唐诗吧~</p>
                    </a>
                  </div>
                </div>

                <!--  优美诗句  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/beautifulpoem" title="优美诗句" target="_blank">
                      <img src="../../public/image/api/BeautifulPoem.png"
                           alt="优美诗句" title="优美诗句">
                      <h3>优美诗句</h3>
                      <p>闲暇时间，来一首优美诗句吧~</p>
                    </a>
                  </div>
                </div>

                <!--  天气诗句    -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/weatherpoem" title="天气诗句"
                       target="_blank">
                      <img src="../../public/image/api/WeatherPoem.png"
                           alt="天气诗句" title="天气诗句">
                      <h3>天气诗句</h3>
                      <p>来一句与天气有关的诗句吧</p>
                    </a>
                  </div>
                </div>

                <!--  古代情诗  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/lovepoem" title="古代情诗"
                       target="_blank">
                      <img src="../../public/image/api/LovePoem.png"
                           alt="古代情诗" title="古代情诗">
                      <h3>古代情诗</h3>
                      <p>想学习一些浪漫的情话？来试试古代情诗吧~</p>
                    </a>
                  </div>
                </div>

                <!--  藏头诗生成 -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/headpoem" title="藏头诗生成"
                       target="_blank">
                      <img src="../../public/image/api/HeadPoem.png"
                           alt="藏头诗生成" title="藏头诗生成">
                      <h3>藏头诗生成</h3>
                      <p>根据输入的内容生成藏头诗哦，十分有趣~</p>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <div class="part  " id="cate2" data-title="编程开发">
            <p class="tt sticky">
              <strong class="information"><span>编</span><span>程</span><span>开</span><span>发</span></strong>

              <!--              <a title="更多编程开发的内容" href="https://www.tool22.com/?cate=3">更多+</a>-->
            </p>
            <div class="items">
              <div class="row">

                <!--  RGB 颜色转换-->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/rgbcolor" title="RGB颜色转换"
                       target="_blank">
                      <img src="../../public/image/Tools/QQPrice.png"
                           alt="RGB颜色转换" title="RGB颜色转换">
                      <h3>RGB颜色转换</h3>
                      <p>实现RGB颜色和16进制的相互转换</p>
                    </a>
                  </div>
                </div>

                <!--  md5加密 -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/md5" title="md5加密"
                       target="_blank">
                      <img src="../../public/image/api/MD5.jpg"
                           alt="md5加密" title="md5加密">
                      <h3>md5加密</h3>
                      <p>发的消息不想背别人发现，试试MD5加密吧</p>
                    </a>
                  </div>
                </div>

                <!--  必应每日一图  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item animate__animated animate__bounceInDown">
                    <a class="a" href="/onlinetool/#/bingimage" title="必应每日一图"
                       target="_blank">
                      <img src="../../public/image/api/Bing.png"
                           alt="必应每日一图" title="必应每日一图">
                      <h3>必应每日一图</h3>
                      <p>闲暇时刻，来欣赏一下必应每日一图吧</p>
                    </a>
                  </div>
                </div>


              </div>
            </div>
          </div>

          <div class="part" id="cate3" data-title="AI智能">
            <p class="tt sticky">
              <strong class="information"><span>AI</span><span>智</span><span>能</span></strong>
              <!--              <a title="更多AI智能的内容" href="https://www.tool22.com/?cate=4">更多+</a>-->
            </p>
            <div class="items">
              <div class="row">

                <!--  图片识别文字    -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/imagetoword" title="图片识别文字"
                       target="_blank">
                      <img src="../../public/image/api/OCR.png"
                           alt="图片识别文字" title="图片识别文字">
                      <h3>图片识别文字</h3>
                      <p>不想打字，试试图片识别文字吧，自动将图片中的文字识别出来呦~</p>
                    </a>
                  </div>
                </div>

                <!--                ticketimage-->
                <!--  票据生成，暂停服务    -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/ticketimage" title="票据生成"
                       target="_blank">
                      <img src="../../public/image/api/OCR.png"
                           alt="图片识别文字" title="图片识别文字">
                      <h3>票据生成(停止服务)</h3>
                      <p>自动生成票据</p>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <div class="part" id="cate4" data-title="音乐专区">
            <p class="tt sticky">
              <strong class="information"><span>音</span><span>乐</span><span>专</span><span>区</span></strong>

              <!--              <a title="更多音乐专区的内容" href="https://www.tool22.com/?cate=5">更多+</a>-->
            </p>
            <div class="items">
              <div class="row">

                <!--  网易云音乐   -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/wywmusic"
                       title="音乐" target="_blank">
                      <img src="../../public/image/api/WYWMusic.png"
                           alt="音乐" title="音乐">
                      <h3>网易云音乐</h3>
                      <p>代码写累了？来首音乐放松一下吧</p>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <!--  新闻专区模块开发完成  -->
          <div class="part" id="cate5" data-title="新闻专区">
            <p class="tt sticky">
              <strong class="information"><span>新</span><span>闻</span><span>专</span><span>区</span></strong>

              <!--              <a title="更多新闻专区的内容" href="https://www.tool22.com/?cate=9">更多+</a>-->
            </p>

            <div class="items">

              <div class="row">
                <!--  国内新闻  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/domesticnews" title="国内新闻" target="_blank">
                      <img src="../../public/image/api/DomesticNews.png" alt="国内新闻" title="国内新闻">
                      <h3>国内新闻</h3>
                      <p>国内新闻提供最及时,最权威,最全面的国内大事,时政资讯。</p>
                    </a>
                  </div>
                </div>

                <!--  国际新闻  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/internationalnews" title="国际新闻" target="_blank">
                      <img src="../../public/image/api/InternationalNews.png" alt="国际新闻" title="国际新闻">
                      <h3>国际新闻</h3>
                      <p>国际新闻频道,以独家的视角,评论分析国际人物、国际政治。以图片、文字、视频等多种形式分析新闻聚焦、军事新闻等内容。</p>
                    </a>
                  </div>
                </div>

                <!--  体育新闻  -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/sportnews"
                       title="体育新闻" target="_blank">
                      <img src="../../public/image/api/SportNews.png"
                           alt="体育新闻" title="体育新闻">
                      <h3>体育新闻</h3>
                      <p>
                        提供最快速最全面最专业的体育新闻和赛事报道
                      </p>
                    </a>
                  </div>
                </div>

                <!--                &lt;!&ndash;  区块链新闻 &ndash;&gt;-->
                <!--                <div class="col-xs-6 col-sm-4 col-md-3">-->
                <!--                  <div class="item">-->
                <!--                    <a class="a" href="/onlinetool/#/blockchainnews"-->
                <!--                       title="区块链新闻" target="_blank">-->
                <!--                      <img src="../../public/image/api/BlockChainNews.png"-->
                <!--                           alt="区块链新闻" title="区块链新闻">-->
                <!--                      <h3>区块链新闻</h3>-->
                <!--                      <p>-->
                <!--                        在线一键测自家风水,看看是否合适...</p>-->
                <!--                    </a>-->
                <!--                  </div>-->
                <!--                </div>-->

                <!--  汉服新闻    -->
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <a class="a" href="/onlinetool/#/clothesnews"
                       title="汉服新闻" target="_blank">
                      <img src="../../public/image/api/ClothesNews.png"
                           alt="汉服新闻" title="汉服新闻">
                      <h3>汉服新闻</h3>
                      <p>
                        了解历史上当天的各种神奇新闻百科...</p>
                    </a>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

      <!--  友情链接  -->
      <div class="f-link part">
        <p class="tt"><strong>友情链接</strong></p>
        <ul id="flink" class="container"></ul>
      </div>

    </div>

    <!-- 阅读进度条 -->
    <div class="test"></div>

    <!--雪花飘雪动画图片-->
    <div class="snow">
      <img src="../../public/image/snow_02.png" alt="" class="snow_01">
      <img src="../../public/image/snow_02.png" alt="" class="snow_02">
      <img src="../../public/image/snow_02.png" alt="" class="snow_03">
      <img src="../../public/image/snow_02.png" alt="" class="snow_04">
      <img src="../../public/image/snow_02.png" alt="" class="snow_05">
    </div>

  </div>
</template>

<script>

  import '../assets/css/style.css'

  /*  导入 animate 相关css，js文件 */
  import '../assets/css/animate.css'
  // import '../assets/js/animation'

  // 默认导出，如果需要被其他
  export default {
    name: 'Welcome',
    data () {
      return {}
    },
    /*  生命周期函数  */
    mounted () {
      /*  监听页面的滚动 */
      window.addEventListener('scroll', this.handleScroll)

      /*  移除左侧导航条的 animate 类名，否则会导致定位失败 */
      setTimeout(function () {
        document.getElementById('quick-nav').classList.remove('animate__animated')
        document.getElementById('quick-nav').classList.remove('animate__rollIn')
      }, 1500)

      /* ------------------------- animate 相关的方法的调用 -----------------------*/
      //效果调整
      // this.CacheaniScroll("cate2", "animate__bounceInDown");
      // this.CacheaniScroll("cate3", "animate__fadeInDownBig");
      // this.CacheaniScroll("cate4", "animate__fadeInDownBig");
      // this.CacheaniScroll("cate5", "animate__fadeInDownBig");
      // this.CacheaniScroll("cate9", "animate__fadeInDownBig");
      //
      // //左侧侧边栏动画 --加了如果不设置移除会使停靠失效
      // this.Classani("quick-nav", "animate__rollIn");
      // //右侧条框
      // this.Idani("cate2", "animate__lightSpeedInRight");
      //
      // this.IdaniScroll("cate3", "animate__rotateInDownRight");
      // this.IdaniScroll("cate4", "animate__rotateInDownRight")
      // this.IdaniScroll("cate5", "animate__rotateInDownRight")
      // this.IdaniScroll("cate9", "animate__rotateInDownRight")

    },
    methods: {
      /*  点击左侧导航条，缓慢一旦到对应位置 */
      slipPage (flag) {
        console.log(flag)
        console.log(this.$('#cate' + flag).offset())

        console.log(this.$('#cate' + flag).offset().top - 80)
        this.$('html,body').animate({
          /*  -71 是因为还要定位一下，头部导航条占了一定的高度  */
          scrollTop: this.$('#cate' + flag).offset().top - 80
        }, 800)
      },
      /*  监听页面滚动  */
      handleScroll () {
        /*  获取滚动时的高度  */
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

        // （1）通过添加类名 fixed 来固定或者释放左侧导航条
        // 导航条 78px，轮播图 320px
        if (scrollTop > 250) {
          // console.log(scrollTop);
          // this.$(".my-left-bar").css("positon", "fixed");
          this.$('.my-left-bar').addClass('bar-fixed')
        } else {
          this.$('.my-left-bar').removeClass('bar-fixed')
        }

        /*  （2）左侧导航条动画效果 */
        if (scrollTop <= 320) {
          /*  休闲娱乐激活  */
          this.$('.list-group-1').addClass('activity')
          this.$('.list-group-2').removeClass('activity')
          this.$('.list-group-3').removeClass('activity')
          this.$('.list-group-4').removeClass('activity')
          this.$('.list-group-5').removeClass('activity')
        } else if (scrollTop > 320 && scrollTop <= 1000) {
          /*  “编程相关” 被激活  */
          this.$('.list-group-1').removeClass('activity')
          this.$('.list-group-2').addClass('activity')
          this.$('.list-group-3').removeClass('activity')
          this.$('.list-group-4').removeClass('activity')
          this.$('.list-group-5').removeClass('activity')
        } else if (scrollTop > 1000 && scrollTop <= 1260) {
          this.$('.list-group-1').removeClass('activity')
          this.$('.list-group-2').removeClass('activity')
          this.$('.list-group-3').addClass('activity')
          this.$('.list-group-4').removeClass('activity')
          this.$('.list-group-5').removeClass('activity')
        } else if (scrollTop > 1260 && scrollTop <= 1530) {
          this.$('.list-group-1').removeClass('activity')
          this.$('.list-group-2').removeClass('activity')
          this.$('.list-group-3').removeClass('activity')
          this.$('.list-group-4').addClass('activity')
          this.$('.list-group-5').removeClass('activity')
        } else if (scrollTop > 1530 && scrollTop <= 1800) {
          this.$('.list-group-1').removeClass('activity')
          this.$('.list-group-2').removeClass('activity')
          this.$('.list-group-3').removeClass('activity')
          this.$('.list-group-4').removeClass('activity')
          this.$('.list-group-5').addClass('activity')
        }

        /*  （3）animate 动画效果  */
        if (scrollTop >= 0 && scrollTop < 300) {
          /*  cate1 休闲娱乐 对应动画 */
          this.$('#cate1').addClass('animate__animated')
          this.$('#cate1').addClass('animate__bounceInDown')
        } else if (scrollTop >= 300 && scrollTop < 500) {
          /*  cate2   对应动画*/
          // animate__fadeInDownBig
          this.$('#cate2').addClass('animate__animated')
          this.$('#cate2').addClass('animate__fadeInDownBig')
          this.$('#cate2').addClass('animate__rotateInDownRight')

        } else if (scrollTop >= 700 && scrollTop <= 800) {
          this.$('#cate3').addClass('animate__animated')
          this.$('#cate3').addClass('animate__fadeInDownBig')
          this.$('#cate3').addClass('animate__rotateInDownLeft')

        } else if (scrollTop > 800 && scrollTop < 1100) {
          this.$('#cate4').addClass('animate__animated')
          this.$('#cate4').addClass('animate__lightSpeedInRight')

        } else if (scrollTop >= 1100) {
          // animate__lightSpeedInRight
          this.$('#cate5').addClass('animate__animated')
          this.$('#cate5').addClass('animate__lightSpeedInLeft')

        }

        /*  （4） 顶部进度条效果 */

      },

      /* ------------------------- animate 相关的方法（用不到） -----------------------*/
      CacheaniScroll (idname, type) {

        console.log('test:' + this.$(window).scrollTop())
        console.log('test2' + this.$(window))
        console.log(this.$(window).offset())
        console.log(this.$(window).offset().top)

        /*
            offset() 设置或返回被选元素的偏移坐标

        * */

        if ((this.$('#' + idname).offset().top - this.$(window).scrollTop()) < this.$(window).height()) {
          this.$('#' + idname).children('.items').find('.item').addClass('animate__animated')
          this.$('#' + idname).children('.items').find('.item').addClass(type)
        }

        this.$(window).scroll(function () {
          if ((this.$('#' + idname).offset().top - this.$(window).scrollTop()) < this.$(window).height()) {
            this.$('#' + idname).children('.items').find('.item').addClass('animate__animated')
            this.$('#' + idname).children('.items').find('.item').addClass(type)
          }

        })

        // setTimeout(function(){
        //     $("#"+idname).children(".items").find(".item").removeClass("animate__animated");
        //     $("#"+idname).children(".items").find(".item").removeClass(type);
        // }, 1000);
      },
      Classani (classname, type) {
        this.$('.' + classname).addClass('animate__animated')
        this.$('.' + classname).addClass(type)
        setTimeout(function () {
          this.$('.' + classname).removeClass('animate__animated')
          this.$('.' + classname).removeClass(type)
        }, 1000)
      },
      Idani (idname, type) {
        this.$('#' + idname).addClass('animate__animated')
        this.$('#' + idname).addClass(type)
        setTimeout(function () {
          this.$('#' + idname).removeClass('animate__animated')
          this.$('#' + idname).removeClass(type)
        }, 1000)
      },
      IdaniScroll (idname, type) {
        if ((this.$('#' + idname).offset().top - this.$(window).scrollTop()) < this.$(window).height()) {
          this.$('#' + idname).addClass('animate__animated')
          this.$('#' + idname).addClass(type)
        }

        this.$(window).scroll(function () {
          if ((this.$('#' + idname).offset().top - this.$(window).scrollTop()) < this.$(window).height()) {
            this.$('#' + idname).addClass('animate__animated')
            this.$('#' + idname).addClass(type)
          }

        })

        //移除
        setTimeout(function () {
          this.$('#' + idname).removeClass('animate__animated')
          this.$('#' + idname).removeClass(type)
        }, 1000)
      },

    }
  }
</script>

<style scoped>

  /* 雪花飘雪动画 */
  .snow .snow_01 {
    position: absolute;
    /*transform: scale(0.1, 0.1);*/
    width: 100px;
    height: 100px;
    z-index: 100;
    animation: snowMove 12s linear 0s infinite normal;
  }

  .snow .snow_02 {
    position: absolute;
    /*transform: scale(0.1, 0.1);*/
    width: 100px;
    height: 100px;
    z-index: 100;
    animation: snowMove2 6s linear 2s infinite alternate;
  }

  .snow .snow_03 {
    position: absolute;
    /*transform: scale(0.1, 0.1);*/
    width: 100px;
    height: 100px;
    z-index: 100;
    animation: snowMove3 9s ease 0s infinite normal;
  }

  .snow .snow_04 {
    position: absolute;
    /*transform: scale(0.1, 0.1);*/
    width: 100px;
    height: 100px;
    z-index: 100;
    animation: snowMove4 20s ease-in-out 0s infinite alternate;
  }

  .snow .snow_05 {
    position: absolute;
    /*transform: scale(0.1, 0.1);*/
    width: 100px;
    height: 100px;
    z-index: 100;
    animation: snowMove5 15s ease-in 0s infinite normal;
  }

  @keyframes snowMove {
    0% {
      top: 10px;
      left: 10px;
      opacity: 1;
      /*  rotateZ 绕 Z 轴旋转, scale 放大或者缩小 */
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    20% {
      top: 124px;
      left: 248px;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    40% {
      top: 210px;
      left: 800px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    60% {
      top: 560px;
      left: 940px;
      opacity: 0;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    80% {
      top: 1000px;
      left: 189px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    100% {
      top: 555px;
      left: 555px;
      opacity: 0;
      opacity: 0;
      transform: rotateZ(360deg);
    }
  }

  @keyframes snowMove2 {
    0% {
      top: 469px;
      left: 264px;
      opacity: 1;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    20% {
      top: 103px;
      left: 24px;
      opacity: 0;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    40% {
      top: 294px;
      left: 590px;
      opacity: 1;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    60% {
      top: 648px;
      left: 159px;
      opacity: 0;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    80% {
      top: 219px;
      left: 900px;
      opacity: 1;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    100% {
      top: 139px;
      left: 440px;
      opacity: 0;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
  }

  @keyframes snowMove3 {
    0% {
      top: 600px;
      left: 900px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    20% {
      top: 400px;
      left: 600px;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    40% {
      top: 300px;
      left: 200px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    60% {
      top: 100px;
      left: 100px;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    80% {
      top: 480px;
      left: 26px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    100% {
      top: 81px;
      left: 1012px;
      opacity: 0;
      transform: rotateZ(360deg);
    }
  }

  @keyframes snowMove4 {
    0% {
      top: 200px;
      left: 1230px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    20% {
      top: 600px;
      left: 984px;
      opacity: 0;
      transform: rotateZ(360deg);
    }
    40% {
      top: 201px;
      left: 193px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    60% {
      top: 702px;
      left: 802px;
      opacity: 0;
      transform: rotateZ(250deg);

    }
    80% {
      top: 1040px;
      left: 359px;
      opacity: 1;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    100% {
      top: 93px;
      left: 666px;
      opacity: 0;
      transform: rotateZ(360deg);
    }
  }

  @keyframes snowMove5 {
    0% {
      top: 190px;
      left: 791px;
      opacity: 1;
      transform: rotateZ(360deg);
    }
    20% {
      top: 948px;
      left: 15px;
      opacity: 0;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    40% {
      top: 616px;
      left: 18px;
      opacity: 1;
      transform: rotateZ(360deg);
    }
    60% {
      top: 269px;
      left: 849px;
      opacity: 0;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
    80% {
      top: 29px;
      left: 702px;
      opacity: 1;
      transform: rotateZ(360deg);
    }
    100% {
      top: 15px;
      left: 36px;
      opacity: 0;
      transform: scale(1.5, 1.5) rotateZ(0deg);
    }
  }

  /*个人简历的字体跳动效果------------开始*/
  .information span {
    font-size: 25px;
    font-weight: bolder;
    font-family: Arial;
    letter-spacing: 10px;
  }

  .information span:nth-child(1) {
    position: relative;
    animation: spanJump 500ms linear 0s infinite alternate;
  }

  .information span:nth-child(2) {
    position: relative;
    animation: spanJump 1200ms ease 200ms infinite alternate;
  }

  .information span:nth-child(3) {
    position: relative;
    animation: spanJump 800ms ease-in-out 100ms infinite alternate;
  }

  .information span:nth-child(4) {
    position: relative;
    animation: spanJump 1000ms ease-out 50ms infinite alternate;
  }

  @keyframes spanJump {
    0% {
      top: 0px;
      color: red;
    }
    50% {
      top: -10px;
      color: orange;
    }
    100% {
      top: 10px;
      color: blue;
    }
  }

  /*    个人简历的字体跳动效果------------结束     */


  /*  图标  */
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  /*  a 标签*/
  .item a {
    text-decoration: none;
  }


  /*  左侧导航条 */
  .list-group {
    list-style: none;
  }

  .list-group .activity {

  }

  .list-group li {
    height: 50px;
  }

  .list-group .activity a {
    color: #1eacda;
  }

  .list-group li a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.62);
    /*position: relative;*/
    /*right: 25px;*/
  }

  .list-group li a:hover {
    color: #1eacda;
  }


  .list-group li svg {
    /*position: relative;*/
    /*right: 20px;*/
    /*top: 8px;*/
  }

  /*  语录微调  */
  footer {
    margin-bottom: 20px;
  }

  .my-left-bar {
  }


</style>
